<template>
  <div class="login-main animate__animated animate__bounceInLeft">
    <van-cell-group inset>
      <van-field
        v-model="formQuery.username"
        name="validator"
        left-icon="contact-o"
        placeholder="请输入用户名"
      />
      <van-field
        v-model="sex"
        is-link
        readonly
        placeholder="选择性别"
        @click="showPicker = true"
      />
      <van-field
        v-model="formQuery.email"
        name="validator"
        left-icon="envelop-o"
        placeholder="请输入邮箱"
      />
      <van-field
        v-model="formQuery.password"
        type="password"
        left-icon="shield-o"
        placeholder="请输入密码"
        name="password"
      />
      <van-field
        v-model="repassword"
        type="password"
        left-icon="shield-o"
        placeholder="请再次填写密码"
        name="password"
      />
      <div class="email-code">
        <van-field
          v-model="formQuery.code"
          left-icon="envelop-o"
          placeholder="请输入邮箱验证码"
        />
        <van-button plain type="primary" class="get-code" @click="getCode()" v-show="showbutton">获取验证码</van-button>
        <van-button disabled type="primary" class="get-code" v-show="!showbutton">{{ time }}秒后重试</van-button>
      </div>
    </van-cell-group>
    <van-button type="primary" block class="login-button" @click="loginSubmit()">注册</van-button>
    <div class="footer">
      已经有账号了？<span class="register" @click="skip('login')">立即登录</span>
    </div>
  </div>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="columns"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script setup>
import { getCodeService, registerService } from '@/api/Login';
import router from '@/router';
import { showSuccessToast, showFailToast } from 'vant';
import { ref, defineEmits } from 'vue';

const emit = defineEmits(['skipto']);

const sex = ref('')
const formQuery = ref({// 注册表单
  username: '',
  sex: '',
  email: '',
  password: '',
  code: ''
});

const repassword = ref('');// 确认密码
const columns = [//  性别选择
  { text: '男', value: 1 },
  { text: '女', value: 0 }
];
const showPicker = ref(false);//  性别选择弹窗
const initialTime = 60;//  倒计时
const time = ref(60);//  倒计时
const showbutton = ref(true);//  发送验证码按钮

/**
 * 下拉框选中事件
 * @param param0 
 */
const onConfirm = ({ selectedOptions }) => {
  showPicker.value = false;
  formQuery.value.sex = selectedOptions[0].value;
  sex.value = selectedOptions[0].text;
};

/**
 *  邮箱格式验证
 * 
 */
const validateEmail = (email) => {
  const regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return regex.test(email);
};

/**
 * 
 * 密码验证
 */
const validatePassword = (password, repassword) => {
  return password === repassword && password.length >= 6;
};

/**
 * 表单验证
 */
const formtest = () => {
  if (!validatePassword(formQuery.value.password,repassword.value)){
    showFailToast('密码不一致')
    return false;
  }
  if (!validateEmail(formQuery.value.email)) {
    showFailToast('请输入正确的邮箱')
    return false;
  }
  if (formQuery.value.code.length !== 6){
    showFailToast('请输入正确的验证码')
    return false;
  }
  if (formQuery.value.username=== '' || formQuery.value.password === '' || formQuery.value.sex === '' || formQuery.value.email === '' || formQuery.value.code === ''){
    showFailToast('请填写完整信息')
  }
  return true

};

/**
 * 登录提交
 */
const loginSubmit = () => {
  if (formtest()){
    registerService(formQuery.value).then((res) => {
      if (res.code === 1){
        setTimeout(() => {
          emit('skipto', 'login');
        }, 1000)
      }
    })
  }
};

/**
 *  获取邮箱验证码
 */
const getCode = () => {
  if (!formQuery.value.email || !validateEmail(formQuery.value.email)) {
    showFailToast('请输入有效的邮箱地址');
    
    return false;
  }
  getCodeService(formQuery.value.email).then((res) => { 
    showSuccessToast('获取验证码成功');
  });
  time.value = initialTime;
  const timer = setInterval(() => {
    if (time.value > 0) {
      showbutton.value = false;
      time.value -= 1;
    } else {
      showbutton.value = true;
      clearInterval(timer);
      time.value = initialTime;
    }
  }, 1000);
};

/**
 * 切换到登录页面
 */
const skip = (page) => {
  emit('skipto', page);
};
</script>

<style lang="scss" scoped>
.login {
  background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  .title {
    margin-top: 70px;
    font-size: 22px;
    letter-spacing: 2px;
    color: #fff;
  }
  .login-main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    width: 90%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    :deep(.van-field__left-icon) {
      color: #72bddb;
    }
    :deep(.login-button) {
      background: #72bddb;
      margin-top: 20px;
      width: 70vw;
      border-radius: 15px;
      border: none;
    }
    :deep(.van-cell-group) {
      width: 80vw;
    }
    .line-box {
      width: 100%;
      display: flex;
      align-items: center;
      margin: 20px 0px;
      .line {
        flex: 1;
        height: 2px;
        background: rgba(0, 0, 0, 0.1);
      }
      .line-text {
        padding: 0 10px;
        color: #999;
        font-size: 14px;
      }
    }
    .footer {
      padding-top: 15px;
      font-size: 14px;
      color: #999;
      .register {
        color: #72bddb;
      }
    }
  }
}

::v-deep.van-cell-group {
  background-color: transparent;
}
::v-deep.van-cell {
  background-color: transparent;
}
.email-code {
  display: flex;
  justify-content: space-between;
}
::v-deep.get-code {
  font-size: 14px;
  width: 120px;
  padding: 0;
  height: 40px;
  border: none;
  background-color: rgba(114, 189, 219, 0.3);
}
</style>